<template>
	<view class="container">
		<view class="v-search">
			<uni-search-bar placeholder="输入分类名称" bgColor="#fff" clearButton="auto" @confirm="search"
				@cancel="clearSearch" @clear="clearSearch"/>
			<view class="v-nav">
			</view>
		</view>
		<view class="v-category">
			<view class="v-category-left">
				<view class="v-category-item" v-for="(item, index) in datas.Categories"
					:class="item.Check === true ? 'v-category-item-seleted' : ''" @click="categoryClick(item)">
					<text>{{ item.Title }}</text>
				</view>
			</view>
			<view class="v-category-right">
				<view class="v-product-item" v-for="(item, index) in datas.Products" @click="productClick(item)">
					<view class="v-product-item-left">
						<image class="v-product-item-image" :src="getServerPath(item.ImageUrl)" mode="aspectFill"></image>
					</view>
					<view class="v-product-item-right">
						<text class="v-product-item-title">{{ item.Title }}</text>
						<text class="v-product-item-originalprice">￥{{ item.OriginalPrice }}</text>
						<view class="v-product-item-group">
							<text class="v-product-item-price">￥{{ item.Price }}</text>
							<text class="v-product-item-buycount">{{ item.BuyCount }}人付款</text>
						</view>
					</view>
					<view class="v-product-source-container">
						<view :class="item.Source == 1 ? 'v-product-source-pt' : 'v-product-source-sj'"></view>
						<text class="v-product-source-text">{{ getProductSourceText(item) }}</text>
					</view>
				</view>
				<uni-load-more :status="datas.loadStatus"></uni-load-more>
			</view>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
	export default {
		data() {
			return {
				datas: {
					messageText: '',
					msgType: 'success',
					duration: 2000,

					Categories: [
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '酒水专区',
						// 	Order: 1,
						// 	Check: false
						// },
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '玉石珠宝',
						// 	Order: 2,
						// 	Check: true
						// },
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '健康养生',
						// 	Order: 3,
						// 	Check: false
						// }
					],
					Products: [
						// {
						// 	Id: '0000-000-000-0000',
						// 	Title: '智利欢乐马288干红葡萄酒',
						// 	ImageUrl: '../../static/header.jpg',
						// 	Price: '2889.36',
						// 	OriginalPrice: '3899.99',
						// 	BuyCount: 4,
						// 	CreateTime: '2024-04-05 12:23',
						// 	Source: 1 //1:平台自营 2:商家运营
						// }
					
					],
					queryContent: '',
					totalPage: 0,
					currentPage: 1,
					pageRow: 10,
					loadStatus: 'more'
				}
			};
		},
		methods: {
			search(item) {
				console.log(item.value);
				let _this = this;
				this.datas.Products = [];
				_this.datas.queryContent = item.value;
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				var curCategory = _this.datas.Categories.find(c => c.Check === true);
				_this.loadProducts(curCategory);
			},
			clearSearch() {
				let _this = this;
				this.datas.Products = [];
				_this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;
				var curCategory = _this.datas.Categories.find(c => c.Check === true);
				_this.loadProducts(curCategory);
			},
			getProductSourceText: function(item) {
				switch (item.Source) {
					case 1:
						return '平台';
					case 2:
						return '商家';
					default:
						break;
				}
			},
			loadCategories: function() {
				console.log('loadCategories');
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();

				uni.request({
					url: _this.sysInfo.BasePath + 'Shop/GetShopCategorDatas',
					method: 'POST',
					data: null,
					header: {
						'content-type': 'application/json',
						'Authorization': `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res)
							_this.datas.Categories = res.data.Data;
							if (_this.datas.Categories && _this.datas.Categories.length > 0) {
								_this.categoryClick(_this.datas.Categories[0])
							}

						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载分类信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载分类信息失败！',
							icon: 'error'
						});
					},
					complete: () => {}
				});

			},
			loadProducts: function(item) {
				console.log('loadProducts');
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();
				var queryData = {
					PageSize: _this.datas.pageRow,
					PageIndex: _this.datas.currentPage,
					CategoryId: item.Id,
					QueryContent: _this.datas.queryContent
				};
				uni.request({
					url: _this.sysInfo.BasePath + 'Shop/GetProductDatasByCategoryId',
					method: 'POST',
					data: queryData,
					header: {
						'content-type': 'application/json',
						'Authorization': `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							console.log(res)
							res.data.Data.Datas.forEach(item => {
								_this.datas.Products.push(item);
							})
							_this.datas.totalPage = res.data.Data.TotalPage;
						} else {
							_this.sysUtils.tip({
								sender: _this,

								title: '加载产品信息失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '加载产品信息失败！',
							icon: 'error'
						});
					},
					complete: () => {

					}
				});

				uni.stopPullDownRefresh();
				if (_this.datas.currentPage >= _this.datas.totalPage) {
					_this.datas.loadStatus = 'noMore';
				} else {
					_this.datas.loadStatus = 'more';
				}
			},
			categoryClick: function(item) {
				console.log('categoryClick');
				let _this = this;
				_this.datas.Categories.forEach((i) => {
					i.Check = false;
				});
				item.Check = true;

				this.datas.Products = [];
				// _this.datas.queryContent = '';
				_this.datas.currentPage = 1;
				_this.datas.totalPage = 0;

				_this.loadProducts(item);
			},
			productClick: function(item) {
				console.log('contentClick');
				console.log(item);
				let _this = this;
				uni.setStorage({
					key: 'CurrentProduct',
					data: item,
					success: function() {
						uni.navigateTo({
							url: '/pages/store/product-detail'
						});
					}
				});

			},
			getServerPath: function(url) {
				let _this = this;
				console.log(`${_this.sysInfo.ImageBasePath}${url}`);
				return `${_this.sysInfo.ImageBasePath}${url}`;
			},
			init: function() {
				console.log('init');
				let _this = this;
				_this.loadCategories();
				// setInterval(()=>{
				// 	console.log("stopPullDownRefresh")
				// 	uni.stopPullDownRefresh();
				// },5000)
			}
		},
		onReachBottom() {
			console.log('onReachBottom');
			let _this = this;

			if (_this.datas.currentPage >= _this.datas.totalPage) {
				_this.datas.loadStatus = 'noMore';
				return;
			} else {
				_this.datas.currentPage = _this.datas.currentPage + 1;
				var curCategory = _this.datas.Categories.find(c => c.Check === true);
				_this.loadProducts(curCategory);
			}
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			let _this = this;
			this.datas.Products = [];
			// _this.datas.queryContent = '';
			_this.datas.currentPage = 1;
			_this.datas.totalPage = 0;
			var curCategory = _this.datas.Categories.find(c => c.Check === true);
			_this.loadProducts(curCategory);
		},
		onShow() {
			let _this = this;
			_this.init();
		},
		created() {
			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: "/pages/account/login"
				})
			})
			// _this.init();
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: stretch;
		align-items: stretch;
		box-sizing: border-box;
		overflow-x: hidden;
		width: 100%;
		/* background-color: #f0f0f0; */
	}

	.v-search {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

	.uni-searchbar {
		flex: 1;
	}

	.v-search ::v-deep .uni-searchbar__box {
		border: solid 1px #ce4d0e;
		/* height:70rpx; */
	}

	.v-search ::v-deep uni-text {
		color: #ce4d0e !important;
	}

	.v-search ::v-deep .uni-input-placeholder {
		color: #ce4d0e50 !important;
	}
	.v-category {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		padding: 10rpx;
		box-sizing: border-box;
		margin-top: 130rpx;
	}

	.v-category-left {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		width: 150rpx;
		height: 100%;
		font-size: 26rpx;
		color: #333;
		padding-right: 10rpx;
		box-sizing: border-box;
		border-right: solid 1px #f1f1f1;
		position: fixed;
		top:var(--window-top);
		left: 0;
		padding-top: 120rpx;
	}

	.v-category-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 50rpx;
		margin: 20rpx 0;
		border-left: solid 10rpx #fff;
		cursor: pointer;
	}

	.v-category-item-seleted {
		color: #c93a00ff;
		border-left: solid 10rpx #c93a00ff;
		font-weight: bold;
	}

	.v-category-right {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		flex: 1;
		margin-left: 155rpx;
		margin-bottom: 50rpx;
		box-sizing: border-box;
	}

	.v-product-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		width: 100%;
		margin-bottom: 20rpx;
		cursor: pointer;
		position: relative;
		box-shadow: 0rpx 5rpx 10rpx #999;
	}

	.v-product-item-left {
		display: flex;
		flex-direction: row;
		justify-content: stretch;
		align-items: stretch;
		width: 160rpx;
		height: 160rpx;
	}

	.v-product-item-image {
		width: 100%;
		height: 100%;
	}

	.v-product-item-right {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		height: 160rpx;
		color: #333;
		padding: 10rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f1f1f1;
		padding-bottom: 5rpx;
		flex: 1;
	}

	.v-product-item-title {
		font-size: 26rpx;
		height: 100rpx;
	}

	.v-product-item-originalprice {
		font-size: 26rpx;
		text-decoration: line-through;
		color: #999;
	}

	.v-product-item-group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: stretch;
	}

	.v-product-item-price {
		font-size: 32rpx;
		color: #ff5343;
		font-weight: bold;
	}

	.v-product-item-buycount {
		font-size: 26rpx;
		color: #999;
	}

	.v-product-source-container {
		position: absolute;
		top: 0;
		right: 0;
	}

	.v-product-source-pt {
		width: 0;
		height: 0;
		border-left: 50rpx solid transparent;
		/* 左边框 */
		border-right: 50rpx solid #9869ff;
		/* 右边框 */
		border-top: 50rpx solid #9869ff;
		/* 下边框，这里可以设置你想要的颜色 */
		border-bottom: 50rpx solid transparent;
		/* 下边框，这里可以设置你想要的颜色 */
	}

	.v-product-source-sj {
		width: 0;
		height: 0;
		border-left: 50rpx solid transparent;
		/* 左边框 */
		border-right: 50rpx solid #00a9f2;
		/* 右边框 */
		border-top: 50rpx solid #00a9f2;
		/* 下边框，这里可以设置你想要的颜色 */
		border-bottom: 50rpx solid transparent;
		/* 下边框，这里可以设置你想要的颜色 */
	}

	.v-product-source-text {
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 15rpx;
		margin-right: 0rpx;
		transform: rotate(45deg);
		font-size: 26rpx;
		color: #fff;
	}
</style>